<template>
  <div class="container">
    <!-- {{ urlList }} -->
    <!-- 素材列表 -->
    <div class="template-file-list">
      <div class="file-list-item" v-for="(item, index) in urlList" :key="index">
        <!-- 视频类型 -->
        <video class="video" v-if="item.scene_type == 'video'" :src="item.material_url"></video>
        <!-- 图片类型 -->
        <img v-else :src="item.material_url" alt="" style="object-fit: cover" />
        <!-- 遮罩层 -->
        <div class="file-msak">
          <a-tooltip>
            <template #title v-if="item.material_name.trim().length > 10">{{
              item.material_name
            }}</template>
            <div class="file-list-type">{{ item.material_name }}</div>
          </a-tooltip>

          <div class="file-list-oprate">
            <span>{{ formatDuration(item.material_duration) }}</span>
            <span @click="showVideoMaskHandle(urlList, index)">
              <FullscreenOutlined style="margin-right: 3px" />全屏
            </span>
            <a-popconfirm title="确定删除该文件吗？" ok-text="确定" cancel-text="取消" @confirm="deleteUrlHandle(item)"
              @cancel="cancel" v-if="allowClick">
              <span>
                <DeleteOutlined style="margin-right: 3px" />删除
              </span>
            </a-popconfirm>
            <span style="cursor: not-allowed" v-else>
              <DeleteOutlined style="margin-right: 3px" />删除
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="upload-action" v-if="allowClick">
      <span @click="importImg"><cloud-download-outlined class="upload-icon" />素材库导入</span>
    </div>
  </div>

  <!-- 查看详情组件 -->
  <templatevideoMaskModal ref="templatevideomaskmodal" />
  <!-- 素材库导入 -->
  <ChooseMaterial :isClip="false" material_type="video_image" :multiple="true" :visible="materiallibraryShow"
    @close="closeChooseMaterial($event, 'material_type')" />
</template>

<script>
import { reactive, toRefs, onMounted, defineComponent, createVNode } from "vue";
// 文件选择弹窗组件
import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";

import {
  FullscreenOutlined,
  DeleteOutlined,
  CloudDownloadOutlined,
} from "@ant-design/icons-vue"; //ant-design-vue图标组件
// 查看图片详情组件
import templatevideoMaskModal from "./templatevideoMaskModal.vue";
import { Form, message, Modal } from "ant-design-vue"; //导入ant-design-vue  Modal确认框
export default defineComponent({
  props: {
    urlList: {
      type: Object,
    }, //父组件传递的图片地址
    updateType: {
      type: String,
    },
    parentIndex: {
      type: Number,
    },
    allowClick: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    FullscreenOutlined,
    DeleteOutlined,
    ChooseMaterial,
    CloudDownloadOutlined,
    templatevideoMaskModal,
  },

  setup(props, context) {
    const state = reactive({
      count: 0,
      playVideo: false,
      timer: null,
      templatevideomaskmodal: null, //查看详情弹窗组件
      materiallibraryShow: false, //控制老系统素材库弹窗显示隐藏
    });

    // 素材库导入
    const importImg = () => {
      state.materiallibraryShow = true;
    };
    // 素材选中回调
    const closeChooseMaterial = (info) => {
      if (!info) {
        return state.materiallibraryShow = false; //关闭弹窗
      }
      state.materiallibraryShow = false; //关闭弹窗
      let filterList = info?.map((item, index) => {
        return {
          // 文件路径
          material_url: item.material_url,
          // 文件名称
          material_name: item.material_name,
          // 素材类型
          scene_type: item.material_type,
          // id
          id: item.id,
          // 文件时长
          material_duration:
            item.material_type == "video" ? item.material_duration : 3000,
          end_time:
            item.material_type == "video" ? item.material_duration : 3000,
          // 文件后缀
          material_extension: item.material_extension,
          // 文件大小
          material_size: item.material_size,
          // 媒资id
          media_id: item?.oss_media_id || '',
        };
      });
      let obj = {
        filterList: filterList,
        updateType: props.updateType,
        parentIndex: props.parentIndex,
      };
      // 将选中的素材传给父组件
      context.emit("updateParentsUrl", obj);
    };
    // 删除素材
    const deleteUrlHandle = (item) => {
      let info = {
        ...item,
        updateType: props.updateType,
        parentIndex: props.parentIndex,
      };
      context.emit("deleteParentUrl", info);
    };
    // 全屏查看
    const showVideoMaskHandle = (info, index) => {
      console.log(index, "父");
      state.templatevideomaskmodal.showMask(info, index);
    };
    // 处理时间显示
    const formatDuration = (duration) => {
      const seconds = Math.floor(duration / 1000);
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds % 3600) / 60);
      const remainingSeconds = seconds % 60;

      return `${formatNumber(hours)}:${formatNumber(minutes)}:${formatNumber(
        remainingSeconds
      )}`;
    };
    const formatNumber = (number) => {
      return number.toString().padStart(2, "0");
    };
    return {
      ...toRefs(state),
      showVideoMaskHandle,
      importImg,
      closeChooseMaterial,
      deleteUrlHandle,
      formatDuration,
      formatNumber,
    };
  },
});
</script>

<style lang="less" scoped>
.container {
  cursor: pointer;

  // 素材文件列表样式
  .template-file-list {
    display: flex;
    max-width: 800px;
    max-height: 500px;
    // height: 300px;
    flex-wrap: wrap;
    overflow-y: auto;

    /* 或者使用 'scroll' */
    &::-webkit-scrollbar {
      width: 8px;
      /* 滚动条的宽度 */
      height: 10px;
      /* 滚动条的高度，垂直滚动条可能用得上 */
      // display: none;
    }

    &::-webkit-scrollbar-thumb {
      background: #888;
      /* 滑块的背景颜色 */
      border-radius: 10px;
      /* 滑块的圆角 */
    }

    // 单个素材卡片
    .file-list-item {
      position: relative;
      width: 180px;
      height: 240px;
      background: black;
      margin: 5px;

      //  视频类型
      video,
      img {
        width: 180px;
        height: 240px;
      }

      // 操作遮罩层
      .file-msak {

        // 素材顶部名称
        .file-list-type {
          position: absolute;
          padding-left: 10px;
          top: 0;
          left: 0;
          color: #fff;
          font-size: 14px;
          width: 100%;
          background: rgba(0, 0, 0, 0.7);
          height: 30px;
          line-height: 30px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        // 素材卡片底部操作按钮
        .file-list-oprate {
          position: absolute;
          width: 180px;
          bottom: 0;
          left: 0;
          display: flex;
          justify-content: space-between;
          padding: 2px;
          color: #fff;
          font-size: 14px;
          background: rgba(0, 0, 0, 0.7);

          span {
            width: 30%;
            border-radius: 5px;
            text-align: center;
          }
        }
      }
    }
  }

  // 底部操作样式
  .upload-action {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-top: 1px solid #dde2e9;
    color: #a3a7b0;

    span {
      display: flex;
      align-items: center;
      justify-content: center;

      .upload-icon {
        margin-right: 5px;
      }
    }
  }
}
</style>
